<template>
  <div>
    <div class="main" ref="main" id="main">
      <!-- 导航栏 -->
      <div class="nav">
        <div class="nav-left">
          {{ projectList.type }}


        </div>
        <div class="nav-right">
          <div class="rate">
            <a-rate
              v-model="rateNumber"
              @change="rate(rateNumber)"
              allow-half
            />
          </div>
          <div
            @mouseover="showSort = true"
            @mouseout="showSort = false"
            style="height: 54px; line-height: 54px; position: relative"
          >
            <i class="share"
              ><img src="@/assets/img/projectDetails/share.png" alt="" />
            </i>
            <div class="btm-sort" v-show="showSort">
              <ul @click="updateType">
                <li
                  v-for="(item, index) in typeList"
                  :key="item.id"
                  :data-index="index"
                >
                  {{ item.value }}
                </li>
              </ul>
            </div>
          </div>
          <div
            @mouseover="showSort1 = true"
            @mouseout="showSort1 = false"
            style="height: 54px; line-height: 54px; position: relative"
          >
            <i class="share"
              ><img src="@/assets/img/projectDetails/duplicate.png" alt="" />
            </i>
            <div class="btm-sort" v-show="showSort1">
              <ul @click="copyProject">
                <li
                  v-for="(item, index) in typeList"
                  :key="item.id"
                  :data-index="index"
                >
                  {{ item.value }}
                </li>
              </ul>
            </div>
          </div>
          <div style="height: 54px; line-height: 54px">
            <i class="share" @click="deleteProject"
              ><img src="@/assets/img/projectDetails/delete.png" alt=""
            /></i>
          </div>
          <span @click="output" class="output">导出</span>
          <i class="share off" @click="close">
            <a-icon type="close" />
          </i>
          <!-- <i class="share"
            ><img
              src="@/assets/img/projectDetails/fork.png"
              alt=""
              @click="close"
          /></i> -->
        </div>
      </div>
      <!-- 分割线 -->
      <!-- <div style="margin-top: 14px; border-top: solid 1px #eeeeee"></div> -->
      <!-- 主体部分 -->
      <div class="body">
        <div class="body-left">
          <div class="body-left-title">
            <input
              type="text"
              v-model="projectList.title"
              placeholder="请输入项目标题"
              @change="titleChange(projectList.title)"
              v-if="titleIsShow"
              ref="titleInput"
              @blur="titleIsShow = false"
            />
            <div class="title" v-else>
              <h3>{{ projectList.title  || "请输入项目标题"}}</h3>
              <a-icon
                type="edit"
                :style="{
                  fontSize: '20px',
                  color: '#E86B99',
                  cursor: 'pointer',
                  marginLeft: '5px',
                }"
                @click="titleShow"
              />
            </div>
            <input
              type="text"
              v-model="projectListName"
              placeholder="请输入项目成员"
              @change="nameChange(projectListName)"
              ref="membersInput"
              v-if="membersIsShow"
              @blur="membersIsShow = false"
              style="margin-top: 0"
            />
            <div class="Members" v-else>
              <h5>{{ projectListName || "请输入项目成员"}}</h5>
              <a-icon
                type="edit"
                :style="{
                  fontSize: '16px',
                  color: '#E86B99',
                  cursor: 'pointer',
                  marginLeft: '5px',
                }"
                @click="membersShow"
              />
            </div>
            <!-- <h2>{{ projectList.title }}</h2> -->
            <!-- <p>{{ projectListName }}</p> -->
          </div>
          <div class="body-left-content">
            <ckeditor
              style="width: 100%"
              :editor="editor"
              v-model="projectList.introduction"
              :config="editorConfig"
              @input="saveProject"
            ></ckeditor>
            <!-- <p>
              {{ projectList.introduction }}
            </p> -->
          </div>
        </div>
        <div class="body-right">
          <div class="TC">
            <div class="body-right-title">
              <div>
                <p>
                  <span style="width: 84px">入库时间 ：</span
                  ><span style="margin-left: 10px">{{
                    projectList.createTime | dateFormat
                  }}</span>
                </p>
              </div>
              <div class="status-flag contact-way">
                <span>状态标记 ：</span>
                <!-- <i v-for="(item, index) in projectListTags" :key="index">{{
                item
              }}</i> -->
                <!-- <button>+</button> -->

                <a-select
                  :value="projectListTags"
                  mode="multiple"
                  style="width: 100%"
                  placeholder="请添加状态"
                  option-label-prop="label"
                  @change="handleInputConfirm"
                >
                  <a-select-option
                    v-for="(item, index) in filteredOptions"
                    :key="index"
                    :value="item.value"
                  >
                    {{ item.value }}
                  </a-select-option>
                </a-select>
              </div>
              <div class="contact-way">
                <span>联系方式 ：</span>
                <div class="number">
                  <a-input-number
                    type="text"
                    :value="phoneNumber"
                    @blur="updatePhoneNumber"
                  />
                </div>
              </div>

              <div
                class="contact-way1"
                v-for="(item, index) in otherList"
                :key="index"
              >
                <span
                  ><i>{{ item.name }}</i
                  ><i> ：</i></span
                >
                <div class="number">
                  <a-input
                    type="text"
                    v-model="item.value"
                    @blur="updateProperty(item.value, item.id)"
                  />
                </div>
              </div>
              <div
                class="content property"
                v-if="property"
                @click="showProperty"
              >
                <div
                  :class="[
                    'point1' ? !loading : '',
                    ' animation' ? loading : '',
                  ]"
                ></div>
                <div
                  :class="[
                    'point2' ? !loading : '',
                    'animation' ? loading : '',
                  ]"
                ></div>
                <div
                  :class="[
                    'point3' ? !loading : '',
                    'animation' ? loading : '',
                  ]"
                ></div>
              </div>
            </div>

            <!-- <div style="margin-top: 14px; border-top: solid 1px #eeeeee"></div> -->
            <div class="body-right-content">
              <!-- 上传 -->
              <div class="upload">
                <form v-show="true" ref="fileForm" class="file">
                  <input
                    type="file"
                    name=""
                    ref="fileInput"
                    :multiple="true"
                    @change="uploadFile"
                  />
                </form>

                <div class="upload-title">
                  <span>相关文档 ：</span>
                  <i class="upload-img"
                    ><img
                      ref="uploading"
                      src="@/assets/img/projectDetails/upload.png"
                      @click="$refs.fileInput.click()"
                  /></i>
                </div>

                <div
                  class="group"
                  @scroll="scrollEvent($event)"
                  ref="scrollUpload"
                >
                  <div class="upload-body" ref="uploadBody">
                    <div class="filename">
                      <div class="uploading" v-if="isShow">
                        <span>上传中...</span>
                      </div>

                      <ul @click="clickLink">
                        <template v-for="(item, index) in fileList">
                          <li
                            class="filename-item"
                            v-if="fileList[index]"
                            :key="item.id"
                            :data-index="index"
                            :data-name="item.pdftemplink"
                          >
                            <div
                              class="filename-item-left"
                              :data-index="index"
                              :data-name="item.pdftemplink"
                            >
                              <i>
                                <img
                                  :data-index="index"
                                  :data-name="item.pdftemplink"
                                  class="file-img"
                                  :src="
                                    require(`@/assets/img/projectDetails/${suffixFn(
                                      item.extname
                                    )}.png`)
                                  "
                                />
                              </i>
                              <span
                                :data-index="index"
                                :data-name="item.pdftemplink"
                                >{{ item.fileName }}</span
                              >
                            </div>
                            <div class="filename-item-right">
                              <i class="uploadTime">{{
                                item.createTime | dateFormat
                              }}</i>

                              <a-button
                                type="primary"
                                @click="deleteFiles(item.id)"
                                closable
                              >
                                删除
                              </a-button>
                            </div>
                          </li>
                        </template>
                      </ul>
                    </div>

                    <div class="content" v-if="loading" @click="showFile">
                      <div
                        :class="[
                          'point1' ? !loading : '',
                          ' animation' ? loading : '',
                        ]"
                      ></div>
                      <div
                        :class="[
                          'point2' ? !loading : '',
                          'animation' ? loading : '',
                        ]"
                      ></div>
                      <div
                        :class="[
                          'point3' ? !loading : '',
                          'animation' ? loading : '',
                        ]"
                      ></div>
                    </div>
                  </div>
                  <!-- 评论 -->
                  <div ref="Comment">
                    <ul class="comment">
                      <li
                        class="comment-item"
                        v-for="item in commentList"
                        :key="item.id"
                      >
                        <p>{{ item.createTime | dateFormat }}</p>
                        <div class="comment-title">
                          <p>
                            {{ item.content }}
                          </p>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 输入评价 -->
          <div class="inputText">
            <div class="input-appraise">
              <a-textarea
                v-model="textarea"
                placeholder="待输入..."
                :rows="4"
                :enterButton="true"
                :bordered="false"
                class="textarea"
              />
              <a-button
                type="primary"
                shape="round"
                class="input-btn"
                @click="addAppraise(textarea)"
                >记录</a-button
              >
              <!-- <textarea v-model:value="value" placeholder="Basic usage" style="resize: none;"></textarea> -->
            </div>
          </div>
        </div>
      </div>
      <div class="exporting" v-if="isExport">
        <!-- <div style="width: 354px; height: 18px">
          <a-progress stroke-linecap="square" :percent="75" />
        </div> -->
        <span>项目导出中...</span>
      </div>
    </div>
    <iframe
      :src="pdfUrl + '#toolbar=0'"
      frameborder="0"
      class="iframe"
      v-if="showIframe"
      ref="popup"
    >
      <button>关闭</button>
    </iframe>
  </div>
</template>

<script>
import { matchFileSuffixType } from "@/components/projectDetails/commonUtil.js";
import BalloonBlockEditor from "./ckeditor-balloon-block";
import { PROJECT_API_URL } from "@/services/baseURL";
let obj = {};
let objKey = 0;
let obj1 = {};
let objKey1 = 0;
export default {
  data() {
    return {
      // 监听窗口大小变化
      screenWidth: 1461,
      // 加载状态
      loading: false,
      // 是否显示上传中
      isShow: false,
      // 是否显示移动复制
      showSort: false,
      showSort1: false,
      // 控制项目分类下拉选择
      showSort3:false,
      // 控制标签输入框显示隐藏
      inputVisible: false,
      //控制多余属性是否隐藏
      property: true,
      //是否显示iframe
      showIframe: false,
      // 是否显示导出
      isExport: false,
      // 是否显示标题输入框
      titleIsShow: false,
      // 是否显示成员输入框
      membersIsShow: false,
      // 富文本
      editor: BalloonBlockEditor,
      editorConfig: {
        placeholder: "请输入项目简介",
      },
      // 项目
      projectList: [],
      projectListName: null,
      projectListTags: [],
      //   文件名列表
      fileList: [],
      // 评论数据
      commentList: [],
      // 项目ID
      id: 65,
      // 项目类型
      typeList: [],
      // 项目状态标记
      tagList: [],
      // 额外属性列表
      otherList: [],
      // 评分星星总数
      rateNumber: 1,
      // 标签列表
      tags: [],
      // 标签输入框的值
      inputValue: "",
      // 评论记录
      textarea: "",
      // 联系方式
      phoneNumber: "",
      // 暂存联系方式
      cachePhone: "",
      // PDF文件在线链接
      pdfUrl: "",
      // 防抖
      timer: null,
      timer1: null,
    };
  },
  // 接收项目详情数据
  props: ["getItem","prodata"],
  created() {},
  mounted() {
    // 全局点击事件
    document.addEventListener("mouseup", (e) => {
      let tree = this.$refs.popup;
      if (tree) {
        // 判断鼠标点击的区域是否在tree里面，否则关闭弹窗
        if (!tree.contains(e.target)) {
          this.showIframe = false;
        }
      }
    });
    // 获取项目额外属性
    this.getType();
    // 获取项目状态标记
    this.getTag();
    //项目详情请求
    this.getProject();
    //打印table传过来的项目数据
    // setTimeout(()=>{
    //     console.log(this.pp)
    // },800)
    // 监听滚动
    // window.addEventListener("scroll", this.scrollFn);
    this.screenWidth = this.$refs.main.clientWidth;
    // console.log("dom是",dom.clientWidth);
    window.addEventListener("resize", () => {
      let dom = document.getElementById("main");
      this.screenWidth = dom.clientWidth;
    });

    // // window.onresize = () => {
    // //     return (() => {
    // //     this.screenWidth = this.$refs.main.clientWidth;
    // //     console.log("窗口大小变化了");
    // //     })();
    // //   };

    // window.addEventListener("resize", function () {
    //   return (() => {
    //     that.screenWidth = that.$refs.main.clientWidth;
    //   })();
    // });
    // });
  },

  watch: {
    screenWidth: {
      handler(newVal, oldVal) {
        if (oldVal !== 0) {
          // this.$forceUpdate()
          // console.log("更新");
          this.getProject();
        }
        // this.getProject();
      },
      deep: true,
    },
    projectListTags(val) {
      console.log(`selected:`, val);
    },
  },
  computed: {
    filteredOptions() {
      return this.tagList.filter(
        (o) => !this.projectListTags.includes(o.value)
      );
    },
  },
  methods: {
    // 是否展示项目分类列表选择
    showType(){
      this.showSort3=!this.showSort3
    },
    // 关闭项目详情弹窗
    close() {
      this.$emit("close");
      this.$emit("update");
      // const PROJECT = {
      //   id: this.id,
      //   title: this.projectList.title,
      //   type: this.projectList.type,
      //   members: this.projectListName,
      //   tags: this.projectListTags.join("、"),
      //   score: this.rateNumber,
      //   createTime: this.projectList.createTime,
      //   attrs: this.otherList,
      // };
      // this.$emit("transmit", PROJECT);
      // console.log(PROJECT);
    },
    // 获取项目类型列表
    async getType() {
      let { data: res } = await this.$api.projectDetails.selectTpye();
      this.typeList = res;
      // console.log(res);
    },
    // 获取项目状态标记列表
    async getTag() {
      let { data: res } = await this.$api.projectDetails.selectTag();
      this.tagList = res;
      // console.log(res);
    },
    // 获取项目信息
    getProject() {
      // let res = await this.$api.projectDetails.project(this.id);
      // let res = await this.$api.projectDetails.project();
      // console.log(res);
      // this.projectList = res.data[0];
      let id = this.getItem.id
      let DATA = this.prodata.data
      DATA.forEach(item => {
        if(item.id==id){
          this.projectList=item
        }
        else{
          this.projectList=this.getItem
        }
      });
      console.log("此项目的具体信息",this.projectList)
      // this.projectList = this.getItem;
      this.id = this.projectList.id;
      // console.log(typeof this.projectList);
      // this.projectListName = this.projectList.members.replace(/[\n\s+,，]/g, "、");
      if(this.projectList.members){
        this.projectListName = this.projectList.members
        .split(/[\n+,，]/g)
        .join("、");
      }

      // console.log(this.projectListName);
      // console.log(typeof this.projectList.tags);
      if (
        this.projectList.tags !== undefined &&
        this.projectList.tags !== null &&
        this.projectList.tags !== ""
      ) {
        this.projectListTags = this.projectList.tags.split(/[,|、]/);
      }
      // console.log(this.projectListTags);
      this.phoneNumber = this.projectList.contact;
      this.cachePhone = this.projectList.concat;
      this.rateNumber = this.projectList.score;
      this.commentList = this.projectList.notes;
      // this.otherList = this.projectList.attrs;
      this.other();

      this.$nextTick(() => {
        this.file();
      });
    },
    other() {
      this.property = true;
      obj1 = {};
      objKey1 = 0;

        const length = this.projectList.attrs.length;
      if (length > 2) {
        obj1[0] = this.projectList.attrs.slice(0, 2);
        obj1[1] = this.projectList.attrs.slice(2, length);
        this.otherList = obj1[objKey1];
      } else {
        this.otherList = this.projectList.attrs;
        this.property=false
      }
      
    },
    // 文件板块
    file() {
      // this.fileList = this.projectList.files;
      // 文件板块

      this.loading = true;
      obj = {};
      objKey = 0;
      // console.log(this.screenWidth);
      if (this.screenWidth >= 1460) {
        // console.log("dayu");
        if (this.otherList.length == 1) {
          if (
            this.commentList.length == 0 &&
            this.projectList.files.length > 8
          ) {
            for (
              let i = 0;
              i < Math.ceil(this.projectList.files.length / 8);
              i++
            ) {
              obj[i] = this.projectList.files.slice(8 * i, 8 * (i + 1));
            }
            this.fileList = obj[objKey];
          } else if (
            this.projectList.files.length > 7 &&
            this.commentList.length !== 0
          ) {
            for (
              let i = 0;
              i < Math.ceil(this.projectList.files.length / 7);
              i++
            ) {
              obj[i] = this.projectList.files.slice(7 * i, 7 * (i + 1));
            }
            this.fileList = obj[objKey];
          } else {
            this.fileList = this.projectList.files;
            this.loading = false;
          }
        } else {
          if (
            this.commentList.length == 0 &&
            this.projectList.files.length > 7
          ) {
            for (
              let i = 0;
              i < Math.ceil(this.projectList.files.length / 7);
              i++
            ) {
              obj[i] = this.projectList.files.slice(7 * i, 7 * (i + 1));
            }
            this.fileList = obj[objKey];
          } else if (
            this.projectList.files.length > 6 &&
            this.commentList.length !== 0
          ) {
            for (
              let i = 0;
              i < Math.ceil(this.projectList.files.length / 6);
              i++
            ) {
              obj[i] = this.projectList.files.slice(6 * i, 6 * (i + 1));
            }
            this.fileList = obj[objKey];
          } else {
            this.fileList = this.projectList.files;
            this.loading = false;
          }
        }
      } else {
        // console.log("xiaoyu");
        if (this.otherList.length == 1) {
          if (
            this.commentList.length == 0 &&
            this.projectList.files.length > 6
          ) {
            for (
              let i = 0;
              i < Math.ceil(this.projectList.files.length / 6);
              i++
            ) {
              obj[i] = this.projectList.files.slice(6 * i, 6 * (i + 1));
            }
            this.fileList = obj[objKey];
          } else if (
            this.projectList.files.length > 5 &&
            this.commentList.length !== 0
          ) {
            for (
              let i = 0;
              i < Math.ceil(this.projectList.files.length / 5);
              i++
            ) {
              obj[i] = this.projectList.files.slice(5 * i, 5 * (i + 1));
            }
            this.fileList = obj[objKey];
          } else {
            this.fileList = this.projectList.files;
            this.loading = false;
          }
        }
        if (this.otherList.length >= 2) {
          if (
            this.commentList.length == 0 &&
            this.projectList.files.length > 4
          ) {
            for (
              let i = 0;
              i < Math.ceil(this.projectList.files.length / 4);
              i++
            ) {
              obj[i] = this.projectList.files.slice(4 * i, 4 * (i + 1));
            }
            this.fileList = obj[objKey];
          } else if (
            this.projectList.files.length > 3 &&
            this.commentList.length !== 0
          ) {
            for (
              let i = 0;
              i < Math.ceil(this.projectList.files.length / 3);
              i++
            ) {
              obj[i] = this.projectList.files.slice(3 * i, 3 * (i + 1));
            }
            this.fileList = obj[objKey];
          } else {
            this.fileList = this.projectList.files;
            this.loading = false;
          }
        }
      }
    },
    // 更改评分
    async rate(value) {
      const query = {
        id: this.id, // 项目id(必传)
        score: value,
      };
      await this.$api.projectDetails.updateRate(query);
      // console.log(value);
    },
    // 移动此项目
    updateType(e) {
      var dom = e.target;
      var index = dom.getAttribute("data-index");
      if (index !== null) {
        this.$confirm(`确定移动此项目到“${dom.innerHTML}”中吗?`, () => {
          const query = {
            id: this.id, // 项目id(必传)
            type: dom.innerHTML,
          };
          this.showUpdateType(query);
        });
      }
    },
    async showUpdateType(query) {
      const res = await this.$api.projectDetails.updateRate(query);
      if (res.code !== "success") {
        return this.$message.error("移动失败");
      } else {
        this.projectList.type = query.type;
        return this.$message.success("移动成功");
      }
    },
    // 复制此项目
    copyProject(e) {
      var dom = e.target;
      var index = dom.getAttribute("data-index");
      if (index !== null) {
        this.$confirm(`确定复制此项目到“${dom.innerHTML}”中吗?`, () => {
          const query = {
            id: this.id, // 项目id(必传)
            type: dom.innerHTML,
          };
          let querys = [query];
          console.log(querys);
          this.showCopyProject(querys);
        });
      }
    },
    async showCopyProject(querys) {
      const res = await this.$api.projectDetails.copyProject(querys);
      console.log(res);
      if (res.code !== "success") {
        return this.$message.error("复制失败");
      } else {
        return this.$message.success("复制成功");
      }
    },
    // 导出项目
    output() {
      this.$confirm("确认导出此项目吗?", () => {
        this.isExport = true;
        let id = this.id;
        this.showOutput(id);
      });
    },
    showOutput(id) {
      this.$api.projectDetails
        .export(id)
        .then((data) => {
          let url = `${PROJECT_API_URL}/project/export/${id}`;
          let link = document.createElement("a");
          link.style.display = "none";
          let filename = this.projectList.title + ".zip";
          link.href = url;
          link.download = filename;
          this.isExport = false;
          document.body.appendChild(link);
          link.click();
        })
        .catch((err) => {
          this.isExport = false;
          this.$message.success("导出失败");
        });
      // let url = window.URL.createObjectURL(new Blob([data]));
    },
    // 删除项目
    deleteProject() {
      let id = this.id;
      this.$confirm("确定要删除此项目吗?", () => {
        this.showDeleteProject(id);
      });
    },
    async showDeleteProject(id) {
      const { data: res } = await this.$api.projectDetails.deleteProject(id);
      console.log(res.status);
      if (res.status !== -1) {
        return this.$message.error("删除失败");
      } else {
        this.close();
        return this.$message.success("删除成功");
      }
    },
    titleShow() {
      this.titleIsShow = true;
      this.$nextTick(() => {
        this.$refs.titleInput.focus();
      });
    },
    membersShow() {
      this.membersIsShow = true;
      this.$nextTick(() => {
        this.$refs.membersInput.focus();
      });
    },

    // 更改项目标题
    titleChange(title) {
      const query = {
        id: this.id, // 项目id(必传)
        title: title,
      };

      this.$api.projectDetails.updateTitle(query);
    },
    // 更改成员
    nameChange(name) {
      const query = {
        id: this.id, // 项目id(必传)
        members: name,
      };
      this.$api.projectDetails.updateName(query);
    },

    // 修改项目简介
    saveProject() {
      let value = this.projectList.introduction;
      const query = {
        id: this.id, // 项目id(必传)
        introduction: value,
      };
      if (this.timer !== null) clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$api.projectDetails.updateRate(query);
      }, 1000);
    },
    // 额外属性
    showProperty() {
      this.property = false;
      objKey1++;
      this.otherList = this.otherList.concat(obj1[objKey1]);
    },
    //上传文件
    async uploadFile(e) {
      const files = e.target.files;
      const file = files[0];
      const extName = file.name
        .substring(file.name.lastIndexOf("."))
        .toLowerCase();
      const fileName = file.name
        .substring(0, file.name.lastIndexOf("."))
        .toLowerCase();
      if ([".docx", ".doc", ".ppt", ".pptx", ".pdf"].includes(extName)) {
        this.$refs.uploading.style.cursor = "wait";
        this.isShow = true;
        const form = new FormData();
        form.append("file", file);
        form.append("fileName", file.name);
        // form.append("type", extName);
        let result = await this.$api.projectDetails.upload(form, this.id);
        if (result.uploaded !== 1) {
          return this.$message.error("上传失败");
        }
        let link = result.pdftemplink;
        // this.getProject();
        this.$nextTick(() => {
          let time = new Date();
          let ID = result.id;
          const file = {
            id: ID,
            projectId: "",
            adminId: "",
            fileName: fileName,
            extname: extName,
            createTime: time,
            status: "",
            pdftemplink: link,
          };
          this.fileList.unshift(file);
          // console.log(this.fileList);
        });
        this.$refs.uploading.style.cursor = "pointer";
        this.isShow = false;
        console.log(this.fileList);
        return this.$message.success("上传成功");
      } else {
        this.$refs.uploading.style.cursor = "pointer";
        this.isShow = false;
        return this.$message.error("请上传正确格式文件！");
      }
    },
    // 在线观看文件
    clickLink(e) {
      var dom = e.target;
      var index = dom.getAttribute("data-index");
      var name = dom.getAttribute("data-name");
      if (index !== null) {
        let Url = PROJECT_API_URL + name;
        this.pdfUrl =
          "/static/DPFjs/web/viewer.html?file=" + encodeURIComponent(Url);
        this.showIframe = true;
      }
    },
    // 删除文件
    deleteFiles(id) {
      this.$confirm("确定要删除此文件吗?", () => {
        this.showDeleteFiles(id);
      });
    },
    async showDeleteFiles(id) {
      let ID = id;
      console.log(this.fileList);
      const { data: res } = await this.$api.projectDetails.deleteFile(id);
      console.log(res.status);
      if (res.status !== -1) {
        return this.$message.error("删除失败");
      } else {
        // this.getProject();
        this.fileList = this.fileList.filter((item) => item.id !== ID);
        return this.$message.success("删除成功");
      }
    },

    // 监听滚动事件
    scrollEvent(e) {
      if (objKey > Object.keys(obj).length - 1) {
        this.loading = false;
        return;
      }
      // let el = e.target;
      let el = this.$refs.uploadBody;
      if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
        this.loading = false;
        // console.log("到底啦");
        objKey++;
        this.fileList = this.fileList.concat(obj[objKey]);
      }
    },
    // 点击省略号显示所有数据
    showFile() {
      this.loading = false;
      // console.log("到底啦");
      objKey++;
      this.fileList = this.fileList.concat(obj[objKey]);
    },

    // 判断文件类型
    suffixFn(fileName) {
      let suffix = matchFileSuffixType(fileName); //fileName 文件名
      if (suffix == "other") return;
      return suffix;
    },

    // // 标签删除
    // handleClose(removedTag) {
    //   this.projectListTags = this.projectListTags.filter(
    //     (tag) => tag !== removedTag
    //   );
    //   let tagString = this.projectListTags.toString();
    //   // console.log(tagString);
    //   const query = {
    //     id: this.id, // 项目id(必传)
    //     tags: tagString,
    //   };
    //   this.$api.projectDetails.deleteTags(query);
    //   // this.getProject();
    // },
    // // 隐藏flag标签添加按钮并显示添加标签输入框
    // showInput() {
    //   this.inputVisible = true;
    //   this.$nextTick(function () {
    //     this.$refs.input.focus();
    //   });
    // },

    // handleInputChange(e) {
    //   this.inputValue = e.target.value;
    // },

    // // 添加标签
    // handleInputConfirm() {
    //   const inputValue = this.inputValue;

    //   let tags = this.projectListTags;
    //   if (tags.length < 3) {
    //     if (inputValue && tags.indexOf(inputValue) === -1) {
    //       tags = [...tags, inputValue];
    //     }
    //     // tags.push(inputValue);

    //     this.projectListTags = tags;
    //     let tagString = tags.toString();
    //     const query = {
    //       id: this.id, // 项目id(必传)
    //       tags: tagString,
    //     };
    //     this.$api.projectDetails.addTags(query);
    //     // this.getProject();
    //   } else if (inputValue == "") return (this.inputVisible = false);
    //   else {
    //     this.inputVisible = false;
    //     this.$message.error("最多添加三个标签");
    //   }

    //   Object.assign(this, {
    //     tags,
    //     inputVisible: false,
    //     inputValue: "",
    //   });
    // },
    handleInputConfirm(selectedItems) {
      this.projectListTags = selectedItems;
      let tagString = this.projectListTags.toString();
      const query = {
        id: this.id, // 项目id(必传)
        tags: tagString,
      };
      if (this.timer1 !== null) clearTimeout(this.timer1);
      this.timer1 = setTimeout(() => {
        this.$api.projectDetails.addTags(query);
      }, 1000);
    },

    // 修改联系方式
    updatePhoneNumber(e) {
      const regMobile =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      let str = e.target.value;
      if (str == "") return;
      if (regMobile.test(str)) {
        this.phoneNumber = str;
        const query = {
          id: this.id, // 项目id(必传)
          contact: str,
        };
        this.$api.projectDetails.updatePhoneNumber(query);
      } else {
        return this.$message.error("您输入的手机号码不合法");
      }
    },
    // 额外属性值修改
    updateProperty(value, id) {
      let propertyId = id;
      let propertyValue = value;
      let attrs = [];
      const property = {
        id: propertyId,
        value: propertyValue,
      };
      attrs.push(property);
      const query = {
        id: this.id, // 项目id(必传)
        attrs: attrs,
      };
      // console.log(query);
      this.$api.projectDetails.updateProperty1(query);
    },
    // 新增笔记
    async addAppraise(textarea) {
      if (textarea == "") return;
      if (textarea.length <= 100) {
        // console.log("进来了");
        const query = {
          projectId: this.id, // 项目id(必传)
          content: textarea,
        };
        const { data: res } = await this.$api.projectDetails.addContent(query);

        if (res.status !== 1) {
          return this.$message.error("记录失败");
        } else {
          this.$nextTick(() => {
            let time = new Date();
            let ID = Math.random() * 10;
            const comment = {
              id: ID,
              projectId: "",
              adminId: "",
              content: textarea,
              createTime: time,
              status: "",
            };
            this.commentList.unshift(comment);
            // this.getProject();
          });
          this.textarea = "";
          return this.$message.success("记录成功");
        }
      } else {
        return this.$message.error("文字超过限制");
      }
    },
  },

  filters: {
    // 时间过滤器
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      // 拼接
      return year + "." + month + "." + day + " " + hours + ":" + minutes;
    },
  },
  beforeDestroy() {
    // 移除监听
    // window.removeEventListener("scroll", this.scrollFn);
    //解绑自定义事件

    // // 移除绑定的onResize事件监听
    window.removeEventListener("resize", () => {});
    // window.addEventListener("resize",
    this.$off("close");
  },
};
</script>

<style scoped lang="scss">
@import "./projectDetails.scss";
</style>